Webpack 是bundle module 的工具，
因為執行環境的不同，使用引入 module 的語法也不同：
node.js：使用 require 語法
const first = require('./index.js')
console.log(first)
web：使用 script 語法
<script src='./index.js' type='module'></sciprt>
在 web 版會有一個問題，因為不像 node.js 一樣可以自行命名 module，
所以會有全域變數的命名問題，如果我今天引入 JQuery，再引入我自己寫的 module，在此 module 裡面也命名函式為 $，這樣就會跟 JQuery 的 $ 產生衝突。
解決方法：
jQuery.noConflict()，來避免。// utilis.js
export function first (str) {
return str[0]
}
//index.js
import { first } from './utilis.js'
const result = findFirst('rockwang')
console.log(result)
//index.html
<!DOCTYPE html>
<html>
<head>
<script src='index.js' type='module'><script/>
</head>
<body></body>
</html>
利用 ES6 的問題：
Log:
所以就出現一些工具，提供 compile 的功能，讓你可以將 module 打包，使可以在瀏覽器執行。
使用 webpack 打包，設定檔會預設去找 src 內的檔案，然後 compile 成 main.js 檔案放在預設的 dist 資料夾裡。
Webpack 安裝指令：npm install webpack webpack-cli --save-dev。
iThome鐵人賽
看影片追技術